<template>
    <view class="page-container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="back-button" @click="goBack">
                <image class="back-icon" src="/static/back-icon.png"></image>
            </view>
            <text class="page-title">修改密码</text>
        </view>

        <!-- 内容区域 -->
        <view class="content-area">
            <view class="password-form">
                <!-- 表单说明 -->
                <view class="form-tips">
                    <text>为了保障您的账号安全，请定期修改密码</text>
                </view>

                <!-- 密码输入表单 -->
                <view class="form-group">
                    <view class="form-item">
                        <text class="form-label">当前密码</text>
                        <input class="form-input" type="password" v-model="passwordForm.oldPassword"
                            placeholder="请输入当前密码" password />
                    </view>

                    <view class="form-item">
                        <text class="form-label">新密码</text>
                        <input class="form-input" type="password" v-model="passwordForm.newPassword"
                            placeholder="请输入新密码" password />
                    </view>

                    <view class="form-item">
                        <text class="form-label">确认新密码</text>
                        <input class="form-input" type="password" v-model="passwordForm.confirmPassword"
                            placeholder="请再次输入新密码" password />
                    </view>
                </view>

                <!-- 密码规则提示 -->
                <view class="password-rules">
                    <text class="rules-title">密码要求：</text>
                    <text class="rule-item" :class="{ 'rule-passed': passwordLength }">• 长度至少为8位</text>
                    <text class="rule-item" :class="{ 'rule-passed': passwordHasNumber }">• 包含数字</text>
                    <text class="rule-item" :class="{ 'rule-passed': passwordHasLetter }">• 包含字母</text>
                </view>

                <!-- 提交按钮 -->
                <button class="submit-btn" @click="submitForm" :disabled="!formValid">确认修改</button>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            passwordForm: {
                oldPassword: '',
                newPassword: '',
                confirmPassword: ''
            },
            // 密码验证状态
            passwordLength: false,
            passwordHasNumber: false,
            passwordHasLetter: false
        }
    },
    computed: {
        // 表单验证
        formValid() {
            return this.passwordForm.oldPassword &&
                this.passwordForm.newPassword &&
                this.passwordForm.confirmPassword &&
                this.passwordForm.newPassword === this.passwordForm.confirmPassword &&
                this.passwordLength &&
                this.passwordHasNumber &&
                this.passwordHasLetter;
        }
    },
    watch: {
        'passwordForm.newPassword': {
            handler(val) {
                // 验证密码长度
                this.passwordLength = val.length >= 8;
                // 验证是否包含数字
                this.passwordHasNumber = /\d/.test(val);
                // 验证是否包含字母
                this.passwordHasLetter = /[a-zA-Z]/.test(val);
            },
            immediate: true
        }
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        submitForm() {
            // 验证两次密码输入是否一致
            if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
                uni.showToast({
                    title: '两次密码输入不一致',
                    icon: 'none'
                });
                return;
            }

            // 验证旧密码是否正确（实际应用中需要与服务器验证）
            if (this.passwordForm.oldPassword !== '123456') { // 这里假设原密码是123456
                uni.showToast({
                    title: '当前密码不正确',
                    icon: 'none'
                });
                return;
            }

            // 显示加载中
            uni.showLoading({
                title: '修改中...'
            });

            // 模拟网络请求
            setTimeout(() => {
                uni.hideLoading();
                uni.showToast({
                    title: '密码修改成功',
                    icon: 'success'
                });

                // 延迟返回上一页
                setTimeout(() => {
                    uni.navigateBack();
                }, 1500);
            }, 1000);
        }
    }
}
</script>

<style>
.page-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
}

.nav-bar {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    background: linear-gradient(135deg, #46bba0, #23804b);
    color: #fff;
    position: relative;
}

.back-button {
    padding: 10rpx;
}

.back-icon {
    width: 40rpx;
    height: 40rpx;
}

.page-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    margin-right: 60rpx;
}

.content-area {
    flex: 1;
    padding: 30rpx;
    overflow-y: auto;
}

.password-form {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.form-tips {
    margin-bottom: 30rpx;
    padding: 20rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    border-left: 4rpx solid #23804b;
}

.form-tips text {
    font-size: 28rpx;
    color: #666;
}

.form-group {
    margin-bottom: 30rpx;
}

.form-item {
    margin-bottom: 30rpx;
}

.form-label {
    display: block;
    font-size: 30rpx;
    color: #333;
    margin-bottom: 15rpx;
    font-weight: 500;
}

.form-input {
    width: 100%;
    height: 90rpx;
    border: 1px solid #e0e0e0;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 30rpx;
    background-color: #f9f9f9;
}

.password-rules {
    margin-bottom: 40rpx;
    padding: 20rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
}

.rules-title {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 15rpx;
}

.rule-item {
    display: block;
    font-size: 26rpx;
    color: #999;
    margin-bottom: 10rpx;
    line-height: 1.5;
}

.rule-passed {
    color: #23804b;
}

.submit-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #23804b;
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
    margin-top: 40rpx;
}

.submit-btn[disabled] {
    background-color: #cccccc;
    color: #ffffff;
}
</style>